<template>
  <el-card class="todo-box">
    <!-- 输入信息部分+添加按钮 -->
    <div class="todo-header">
      <el-input type="text" placeholder="请输入要添加的备忘录" v-model="textInfo" @keyup.enter.native="addItemInfo" clearable/>
      <el-button type="primary" @click="addItemInfo">添加</el-button>
    </div>

    <!-- todoList展示列表 -->
    <div class="todo-content">
      <el-table ref="multipleTable"
    :data="todoList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="15">
    </el-table-column>
    <el-table-column
      label="待办事项"
      width="120"
      prop="text">
    </el-table-column>
  </el-table>
  <!-- 提示信息数及清除按钮 -->
  <div class="todo-footer" v-if="this.todoList.length !== 0">
    <div class="left">当前备忘录共有 <span>{{this.todoList.length}}</span> 条数据</div>
    <div class="right">
      <el-button type="danger" size="mini" @click="handleDel">删除</el-button>
    </div>
  </div>
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      textInfo: '',
      todoList: [],
      multipleSelection: [],
      key: 0
    }
  },
  methods: {
    addItemInfo () {
      if (this.textInfo !== '') {
        const obj = {
          id: this.key++,
          text: this.textInfo
        }
        // 将输入框的数据添加到 todoList数组中
        this.todoList.push(obj)
        this.textInfo = ''
      } else {
        this.$message.info('请输入信息后再添加')
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 删除所选数据
    handleDel () {
      // 根据选中的项在 todoList中找到相对应的索引
      const temp = this.multipleSelection.map(item => {
        return this.todoList.indexOf(item)
      })
      // 对索引进行排序（倒序）防止 由于Index值得变化带来 删除错误
      temp.sort((a, b) => { return b - a }).forEach(item => {
        this.todoList.splice(item, 1)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.todo-box{
  height: 100%;
  overflow: scroll;
  margin-right: 10px;
  position: relative;
  .todo-header{
    width: 100%;
    display: flex;
    .el-button{
      width: 70px;
      margin: 0 15px;
    }
    .el-input{
      flex: 1;
    }
  }
  .todo-content{
    .cell{
      width: 100%;
    }
   /deep/ table{
      width: 100% !important;
    }
  }
  .todo-footer{
    z-index: 1;
    width: 100%;
    height: 50px;
    background-color: aliceblue;
    position: sticky;
    bottom: 0px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left{
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      padding-left: 20px;
      // vertical-align: middle;
      line-height: 50px;
      height: 50px;
      span{
        color: coral;
      }
    }
    .right{
      padding-right: 20px;
      // vertical-align: middle;
      line-height: 50px;
      height: 50px;
    }
  }
}
</style>
